<template>
      <div class="governance-area comm-tb-gap bg-write">
            <div class="constraint">
                  <div class="governance-tit-box  meta-tle-box">
                        <h2>{{ propData.moduleTitle }}</h2>
                        <p>致力于将社会责任融入日常的运营、产品及服务，促进科技创新以为所有持份者创造长远价值。</p>
                  </div>
                  <div class="governance-main-box">
                        <ul class="flex flex-warp"> 
                              <li class="flex ali-center" v-for="(item, index) in governanceList" :key="index">
                                    <div class="governance-icon-box" v-if="index == 0">
                                          <svg t="1698193997786" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                                xmlns="http://www.w3.org/2000/svg" p-id="94425" width="60" height="60">
                                                <path d="M947.900861 750.88429l-35.75868 14.393029c6.636785-22.309194-25.699552-37.597789-57.748028-25.68356-7.148537 2.654714-15.016726 6.157018-23.588574 10.346988 2.606737-24.100326-29.985476-39.10106-75.659353-20.454092-11.098624 4.5418-78.681888 42.091612-101.82268 52.358639 39.149037 11.274539 77.082663 37.501835 68.974591 84.407115a66.447814 66.447814 0 0 1-62.033952 58.163827c-127.554216 3.086505-179.768924 8.731771-260.257938-28.146367-35.662726-16.328091-56.548609-49.575987-71.293467-85.174743 139.276538 87.797473 169.134076 77.482469 329.440427 73.564367a25.699552 25.699552 0 0 0 25.267761-25.155815c0.14393-38.381409-28.993956-45.242086-83.15972-55.173276-46.601427-8.555856-85.894395-6.796708-120.677546-38.125532-118.038825-106.348487-226.162453-124.483703-364.271556-60.498696-39.404913 18.263154-77.354531 41.675813-115.016289 63.041464v194.945573c51.878871-17.38358 110.346551-39.149037 162.35336-52.134747a87.157783 87.157783 0 0 1 64.096953 11.70633c137.101591 72.908685 144.04223 72.253002 298.719308 98.240414a120.229764 120.229764 0 0 0 58.25978-3.19845c194.465806-60.002936 210.905842-66.607737 407.450641-189.764083 64.160922-40.172541 24.931924-105.452921-43.323015-77.578423z m-436.364636-71.757242A1303.640549 1303.640549 0 0 1 817.89983 372.619512h0.111946a1460.092768 1460.092768 0 0 0-273.7554 318.789587 468.780934 468.780934 0 0 0 408.346207-394.161079 20.374131 20.374131 0 0 0-22.005341-23.380674A468.796926 468.796926 0 0 0 510.656651 669.259827a20.278178 20.278178 0 0 0 0.879574 9.771267z m23.20476-265.471412a19.766426 19.766426 0 0 0 16.344083-8.220019 333.406506 333.406506 0 0 0 0-397.183614 20.358139 20.358139 0 0 0-32.688166 0 333.470475 333.470475 0 0 0 0 397.183614 19.782418 19.782418 0 0 0 16.344083 8.172042z m-273.787384 39.676781a370.844372 370.844372 0 0 0 215.271727 99.151973 20.374131 20.374131 0 0 0 22.261218-23.652543A372.619512 372.619512 0 0 0 171.253049 220.693102a20.358139 20.358139 0 0 0-22.261217 23.652543A371.020287 371.020287 0 0 0 261.01757 453.28444z"
                                                      p-id="94426" fill="#2c2c2c"></path>
                                          </svg>
                                    </div>
                                    <div class="governance-icon-box" v-else-if="index == 1">
                                          <svg t="1698211826754" class="icon" viewBox="0 0 1025 1024" version="1.1"
                                                xmlns="http://www.w3.org/2000/svg" p-id="224408" width="60" height="60">
                                                <path d="M723.2 307.2c10.24-10.24 30.72-10.24 40.96 0l215.04 215.04c71.68-117.76 61.44-271.36-40.96-368.64C820.48 35.84 636.16 35.84 518.4 153.6L344.32 317.44c-10.24 10.24-30.72 10.24-40.96 0-15.36-10.24-15.36-30.72 0-40.96l163.84-163.84C349.44 30.72 190.72 46.08 88.32 148.48c-117.76 117.76-117.76 307.2 0 424.96l389.12 389.12c15.36 15.36 35.84 20.48 51.2 15.36 10.24 0 15.36-5.12 25.6-15.36l92.16-92.16-220.16-220.16c-10.24-10.24-10.24-30.72 0-40.96 10.24-10.24 30.72-10.24 40.96 0l220.16 220.16 107.52-107.52-220.16-220.16c-10.24-10.24-10.24-30.72 0-40.96 10.24-10.24 30.72-10.24 40.96 0l220.16 220.16 102.4-102.4s0-5.12 5.12-5.12l-220.16-220.16c-15.36-15.36-15.36-35.84 0-46.08z"
                                                      fill="#2c2c2c" p-id="224409"></path>
                                          </svg>
                                    </div>
                                    <div class="governance-icon-box" v-else-if="index == 2">
                                          <svg t="1698198951029" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                                xmlns="http://www.w3.org/2000/svg" p-id="206716" width="60" height="60">
                                                <path d="M134.4 497.92h220.16a49.088 49.088 0 0 0 39.68-54.4 53.44 53.44 0 0 0-36.48-59.52H134.4a53.44 53.44 0 0 0-36.48 59.52 50.432 50.432 0 0 0 36.48 54.4z m66.56-293.76h259.2a49.792 49.792 0 0 0 35.2-56.32 48 48 0 0 0-35.2-51.84H200.96a49.984 49.984 0 0 0-35.2 56.96 47.744 47.744 0 0 0 35.2 51.2z m-100.48 468.48H40.96a50.496 50.496 0 0 0-40.32 56.96 49.28 49.28 0 0 0 40.32 51.84h59.52a50.496 50.496 0 0 0 40.32-56.96 49.28 49.28 0 0 0-40.32-51.84z m902.4-383.36c-10.24-24.32-10.88-35.84-35.2-24.96a406.336 406.336 0 0 0-43.52 38.4l-69.76 69.12c-12.16 12.8-60.8-43.52-72.96-55.68s15.36-32 27.52-44.16c0-0.64-28.16 27.52-27.52 27.52l69.76-69.76c18.56-18.56 47.36-49.28 28.8-68.48a49.664 49.664 0 0 0-15.36-10.24 264.448 264.448 0 0 0-364.16 288.64c1.92 8.96 3.84 17.28 5.76 25.6l-245.12 243.84a129.344 129.344 0 0 0-37.12 90.88 125.248 125.248 0 0 0 37.12 90.24 128 128 0 0 0 181.76 0l245.12-244.48a250.048 250.048 0 0 0 72.32 10.24 264.96 264.96 0 0 0 186.88-76.8 262.4 262.4 0 0 0 55.68-289.92z"
                                                      fill="#2c2c2c" p-id="206717"></path>
                                          </svg>
                                    </div>
                                    <div class="governance-icon-box" v-else-if="index == 3">
                                          <svg t="1698211707362" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                                xmlns="http://www.w3.org/2000/svg" p-id="220284" width="60" height="60">
                                                <path d="M954.514286 12.814629H217.585371c-85.723429 0-154.477714 72.177371-154.477714 160.446171 0 6.085486 1.082514 11.907657 1.696914 17.846857H63.0784v641.813943c0 98.0992 76.361143 178.263771 171.505371 178.263771h719.930515V262.436571H217.585371c-45.524114 0-83.178057-39.555657-83.178057-89.146514S172.032 84.114286 217.585371 84.114286h736.928915V12.785371zM473.146514 333.677714h196.110629v191.868343l-75.9808-59.830857a35.6352 35.6352 0 0 0-44.119772 0l-76.010057 59.830857v-191.868343z m-255.561143 0h184.232229v265.333029a35.664457 35.664457 0 0 0 57.7536 28.028343l111.616-87.946972 111.645257 87.946972a35.664457 35.664457 0 0 0 57.7536-28.028343v-265.333029h142.628572v606.178743H234.554514c-54.944914 0-100.176457-47.542857-100.176457-106.964114V308.077714a149.211429 149.211429 0 0 0 83.178057 25.6z m23.522743-196.110628h642.106515v71.328914H241.078857V137.596343z"
                                                      fill="#2c2c2c" p-id="220285"></path>
                                          </svg>
                                    </div>
                                    <div class="governance-icon-box" v-else-if="index == 4">
                                          <svg t="1698198702776" class="icon" viewBox="0 0 1170 1024" version="1.1"
                                                xmlns="http://www.w3.org/2000/svg" p-id="190531" width="60" height="60">
                                                <path d="M1150.537143 933.595429a58.368 58.368 0 0 1-86.454857 0l-111.177143-114.980572a204.068571 204.068571 0 0 1-123.684572 38.253714c-135.899429 0-247.222857-114.907429-247.222857-255.414857 0-140.580571 111.323429-255.488 247.222857-255.488 135.972571 0 247.222857 114.907429 247.222858 255.488 0 51.053714-12.361143 89.380571-37.083429 127.707429l111.177143 114.980571a63.122286 63.122286 0 0 1 0 89.453715z m-319.488-481.426286c-79.945143 0-144.822857 66.998857-144.822857 149.650286s64.877714 149.723429 144.822857 149.723428c80.018286 0 144.822857-67.072 144.822857-149.723428 0-82.651429-64.804571-149.650286-144.822857-149.650286z m-261.339429-16.822857H174.08c-24.649143 0-49.444571 25.6-49.444571 63.853714 0 38.326857 24.795429 63.926857 49.444571 63.926857h346.112v38.326857c0 25.526857 0 63.853714 12.361143 89.380572H186.514286c-24.722286 0-49.371429 25.6-49.371429 63.853714 0 38.326857 24.649143 63.926857 49.371429 63.926857h407.844571c61.805714 63.780571 136.045714 102.180571 222.500572 102.180572 37.083429 0 74.166857-12.8 111.250285-25.6l37.083429 38.4c0 51.053714-49.444571 89.380571-98.889143 89.380571H124.708571c-61.732571 0-123.611429-63.853714-123.611428-127.780571V128.804571C1.170286 52.150857 63.049143 1.024 124.781714 1.024h741.668572c61.732571 0 123.611429 51.126857 123.611428 127.780571v204.361143c-49.517714-25.6-98.962286-51.126857-160.768-51.126857-111.177143 0-210.066286 63.926857-259.510857 153.307429z m-11.410285-260.169143H186.514286c-34.669714 0-62.756571 29.037714-62.756572 64.877714s28.086857 64.877714 62.756572 64.877714h371.785143c34.669714 0 62.756571-29.037714 62.756571-64.877714s-28.086857-64.877714-62.756571-64.877714z"
                                                      fill="#2c2c2c" p-id="190532"></path>
                                          </svg>
                                    </div>
                                    <div class="governance-icon-box" v-else-if="index == 5">
                                          <svg t="1698198891120" class="icon" viewBox="0 0 1026 1024" version="1.1"
                                                xmlns="http://www.w3.org/2000/svg" p-id="204520" width="60" height="60">
                                                <path d="M969.265033 623.750557h-285.077951a57.01559 57.01559 0 0 0 0 114.03118h285.077951a57.01559 57.01559 0 0 0 0-114.03118zM969.265033 794.797327h-285.077951a57.01559 57.01559 0 0 0 0 114.031181h285.077951a57.01559 57.01559 0 0 0 0-114.031181z"
                                                      fill="#2c2c2c" p-id="204521"></path>
                                                <path d="M513.140312 221.790646l138.547884 230.91314h289.069042l85.523386-114.03118h-309.594655L513.140312 0 309.594655 338.672606H0l224.071269 299.331848-76.971046 385.995546L456.124722 838.699332v-132.846325l-147.100223 87.804009 37.060134-183.590201L228.062361 452.703786h146.530067L513.140312 221.790646zM877.469933 1022.859688l1.710468 1.140312v-1.140312h-1.710468z"
                                                      fill="#2c2c2c" p-id="204522"></path>
                                          </svg>
                                    </div>
                                    <div class="governance-rt-box">
                                          <div class="g-tp">
                                                <span>{{ item.text }}</span>
                                          </div>
                                          <p class="relative flex">
                                                <img src="https://www.tencent.com/img/business/go-icon.png" alt="arrow-right">
                                          </p>
                                    </div>
                              </li>
                        </ul>
                  </div>
            </div>
      </div>
</template>

<script lang="ts" setup>
let propData = defineProps({ moduleTitle: { default: '' } })
let governanceList = [
      {
            text: '环境'
      },
      {
            text: '社会'
      },
      {
            text: '治理'
      },
      {
            text: '政策'
      },
      {
            text: '报告'
      },
      {
            text: 'ESG评级'
      }
]

</script>